<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/animate4.1.1.css">
    <script src="./js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</head>
<body>
    <head>
        <nav class="navbar navbar-default navbar-inverse">
                <div class="container">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="./img/logo.png" alt=""></a>
                  </div>
              
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
                      <li><a href="#">Laya家族</a></li>
                      <li><a href="#">游戏</a></li>
                      <li><a href="#">新闻动态</a></li>
                      <li><a href="#">开发者中心</a></li>
                      <li><a href="#">开发者社区</a></li>
                      <li><a href="#">开放平台</a></li>
                      <li><a href="#">关于我们</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Language <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Chinese</a></li>
                          <li><a href="#">English</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
        </nav>
    </head>
    <section>
      <!-- 轮播图 -->
      <div class="banner">
        <img src="./img/banner.jpg" alt="">
      </div>
       <!-- 引擎介绍  -->
      <div class="laya-flash">
        <div class="container">
          <div class="row">
            <div class="col-md-8 flash" >
            <h2 class=" wow animate__backInDown" data-wow-duration="1s" data-wow-offset="200">LayaFlash 引擎</h2>
            <p class="wow animate__fadeInDown" data-wow-duration="2s" data-wow-offset="200">让Flash技术变成开发HTML5产品的利器</p>
            <div class="flash-item wow animate__bounceInLeft"  data-wow-duration="2s" data-wow-offset="200">
              <div class="item">
                <div class="item-img">
                  <img src="./img/flash1.png" alt="">
                </div>
                <div class="item-contnet">
                  <h4>快速Flash产品转换</h4>
                  <p>Flash页游\手游仅需1个人7天即可
                    转换为HTML5和APP游戏</p>
                </div>
              </div>
              <div class="item">
                <div class="item-img">
                  <img src="./img/flash2.png" alt="">
                </div>
                <div class="item-contnet">
                  <h4>LayaFlash IDE</h4>
                  <p>支持代码编译、调试、压缩与混淆
                    加密、资源转换、在线文档等功能</p>
                </div>
              </div>
              <div class="item">
                <div class="item-img">
                  <img src="./img/flash3.png" alt="">
                </div>
                <div class="item-contnet">
                  <h4>HTML5零学习成本</h4>
                  <p>AS3开发者可直接使用Flash开源框
                    架和工具链进行开发HTML5</p>
                </div>
              </div>
              <div class="item">
                <div class="item-img">
                  <img src="./img/flash4.png" alt="">
                </div>
                <div class="item-contnet">
                  <h4>性能媲美APP</h4>
                  <p>LayaFlash引擎的重度游戏已运行于
                    QQ空间等平台，性能媲美APP</p>
                </div>
              </div>
            </div>
          </div> 
          </div>
        </div>
      </div>
      <!-- 引擎优势  -->
      <div class="laya-advantage">
        <div class="container">
          <div class="row">
            <div class="advantage col-lg-7 col-lg-offset-5  col-md-offset-3 col-md-12 col-sm-offset-3 col-sm-12 ">
              <h1 class="wow animate__bounceIn"data-wow-duration="2s" data-wow-offset="200">Layabox 优势</h1>
              <div class="advantage-item wow animate__bounceIn" data-wow-duration="2s" data-wow-offset="200">
                <div><img src="./img/advantage1.png" alt=""></div>
                <p>快速上手，Flash程序员3小时掌握HTML5开发</p>
              </div>
              <div class="advantage-item wow animate__bounceIn"data-wow-duration="2s" data-wow-offset="200">
                <div><img src="./img/advantage2.png" alt=""></div>
                <p>4年优化打磨，LayaPlayer运行器性能媲美APP</p>
              </div>
              <div class="advantage-item wow animate__bounceIn"data-wow-duration="2s" data-wow-offset="200">
                <div><img src="./img/advantage3.png" alt=""></div>
                <p>超5亿的LayaPlayer移动设备安装量帮助CP发行</p>
              </div>
              <div class="advantage-item wow animate__bounceIn"data-wow-duration="2s" data-wow-offset="200">
                <div><img src="./img/advantage4.png" alt=""></div>
                <p>使用LayaFlash开发大型HTML5游戏的企业超100家</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 产品家族 -->
      <div class="laya-product">
        <div class="container">
          <div class="row">
            <div class="product wow animate__zoomInDown" data-wow-duration="2s" data-wow-offset="100">
              <h1>Layabox产品家族</h1>
              <div class="product-item">
                <div class="item col-md-6 col-sm-6">
                  <div class="item-img">
                    <img src="./img/product1.png" alt="">
                  </div>
                  <div class="item-content">
                    <h3>LayaAir</h3>
                    <p>核心库仅100K左右的新一代HTML5引擎，支
                      持AS3\TS\JS语言开发，支持2D\3D，非运行
                      器模式下性能媲美APP。</p>
                  </div>
                </div>
                <div class="item col-md-6 col-sm-6">
                  <div class="item-img">
                    <img src="./img/product2.png" alt="">
                  </div>
                  <div class="item-content">
                    <h3>LayaAir</h3>
                    <p>核心库仅100K左右的新一代HTML5引擎，支
                      持AS3\TS\JS语言开发，支持2D\3D，非运行
                      器模式下性能媲美APP。</p>
                  </div>
                </div>
                <div class="item col-md-6 col-sm-6">
                  <div class="item-img">
                    <img src="./img/product3.png" alt="">
                  </div>
                  <div class="item-content">
                    <h3>LayaAir</h3>
                    <p>核心库仅100K左右的新一代HTML5引擎，支
                      持AS3\TS\JS语言开发，支持2D\3D，非运行
                      器模式下性能媲美APP。</p>
                  </div>
                </div>
                <div class="item col-md-6 col-sm-6">
                  <div class="item-img">
                    <img src="./img/product4.png" alt="">
                  </div>
                  <div class="item-content col-sm-6">
                    <h3>LayaAir</h3>
                    <p>核心库仅100K左右的新一代HTML5引擎，支
                      持AS3\TS\JS语言开发，支持2D\3D，非运行
                      器模式下性能媲美APP。</p>
                  </div>
                </div>
                <div class="item col-md-6 col-sm-6">
                  <div class="item-img">
                    <img src="./img/product5.png" alt="">
                  </div>
                  <div class="item-content">
                    <h3>LayaAir</h3>
                    <p>核心库仅100K左右的新一代HTML5引擎，支
                      持AS3\TS\JS语言开发，支持2D\3D，非运行
                      器模式下性能媲美APP。</p>
                  </div>
                </div>
                <div class="item col-md-6 col-sm-6">
                  <div class="item-img">
                    <img src="./img/product6.png" alt="">
                  </div>
                  <div class="item-content">
                    <h3>LayaAir</h3>
                    <p>核心库仅100K左右的新一代HTML5引擎，支
                      持AS3\TS\JS语言开发，支持2D\3D，非运行
                      器模式下性能媲美APP。</p>
                  </div>
                </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      <!-- 引擎游戏 -->
      <div class="laya-game">
        <div class="container">
          <div class="row">
            <div class="game-head">
              <h2>采用Layabox引擎的精彩游戏</h2>
              <p>更多</p>
            </div>
            <div class="game-bottom row">
              <div class="col-lg-5 col-md-5">
                <video src="./video/video1.mp4"  controls></video>
              </div>
              <div class="col-md-7 games col-sm-12 col-xs-12">
                <div class="col-sm-2 ">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2"> 
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
                <div class="col-sm-2">
                  <div class="game-img"><img src="./img/game1.png" alt=""></div>
                  <p>迷你迷你</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 合作伙伴 -->
      <div class="laya-partner">
        <div class="container">
          <div class="row">
            <div class="partner wow animate__heartBeat" data-wow-duration="2s" data-wow-offset="200">
              <h3>合作伙伴<small>(排序不分先后)</small></h3>
              <div class="partner-item">
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                  <div class="item">
                  <img src="./img/partner1.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="container">
        <div class="row">
          <div class="foot">
            <div class="footer-left col-md-6 col-sm-7 col-xs-12">
              <div class="lf-top col-md-10 col-sm-12">
                <p class="col-md-4">公司简介</p>
                <p class="col-md-4">联系方式</p>
                <p class="col-md-4"> 人才招聘</p>
              </div>
              <div class="lf-bottom col-md-12 col-sm-12">
                <p>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 </p>
              </div>
            </div>
            <div class="footer-right col-md-3 col-sm-3 col-xs-12">
              <div class="email" tabindex="0">
              <img src="./img/foot-email.png" alt="">
              </div>
              <div class="wx" tabindex="0">
              <img src="./img/foot-wx.png" alt="">
              </div>
              <div class="qq" tabindex="0">
              <img src="./img/foot-qq.png" alt="">
              </div>
              <div class="QR">
                <img src="./img/erwm.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>